﻿<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
  .navbar{
    background: red;
  }
</style>
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
   
    <div id="box">
      <navbar myname="home" :myshow="false"></navbar>
      <navbar myname="list" :myshow="true"></navbar>
      <navbar :myname="parentname" :myshow="true"></navbar>
    </div>

    <script type="text/javascript">
         
      Vue.component("navbar",{
        template:`<div>
          <button>返回</button>  
          navbar -- {{myname}}
          <button v-show="myshow">首页</button>  
        </div>`,

        // props:["myname","myshow"] // 接受父组件传来的属性
      
        props:{
          myname:String,
          myshow:Boolean
        }
      })


      new Vue({
        el:"#box",
        data:{
          parentname:"父组件的状态"
        }
      })
    </script>
</body>


</html>

